<script setup lang="ts">
import { onMounted } from 'vue';
import { getCurrentInstance } from '@tarojs/taro';
import { GET_DETAIL_BY_QR_CODE } from '/@/api/modules/visitor/visitor-appointment-record';
import { state } from './state';
import { getSysImgUrl } from '/@/utils/index';
import { Tips as AppNutIconTips } from '@nutui/icons-vue-taro';
const params = getCurrentInstance().router?.params as {
  qrcode: string;
};
/**
 * 查询详情
 */
function queryDetail() {
  GET_DETAIL_BY_QR_CODE({
    qrcode: params.qrcode,
  }).then((res) => {
    state.visitorAppointmentDto = res.visitorAppointmentDto;
    if (res.content && res.content.length > 0) {
      state.content = res.content[0];
    }
  });
}

onMounted(() => {
  queryDetail();
});

function idCardInfo(idNo?: string) {
  if (idNo) {
    return idNo.substring(0, 3) + '****' + idNo.substring(13);
  } else {
    return '_';
  }
}
</script>

<template>
  <view class="visitor-release-detail app-page--1">
    <app-navbar title="访客详情" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="visitor-release-detail__wrapper">
        <nut-cell-group>
          <nut-cell
            title="拜访对象"
            :desc="state.visitorAppointmentDto?.beVisitedPersonName || '_'"
          />
          <nut-cell
            title="所属部门"
            :desc="state.visitorAppointmentDto?.beVisitedPersonOrg || '_'"
          />
          <nut-cell title="来访事由" :desc="state.visitorAppointmentDto?.purpose || '_'" />
        </nut-cell-group>

        <nut-cell-group>
          <nut-cell title="访客1" :desc="state.content?.personName || '_'" />
          <nut-cell title="性别" :desc="state.content?.sex === 1 ? '男' : '女' || '_'" />
          <nut-cell title="联系电话" :desc="state.content?.phone || '_'" />
          <nut-cell title="身份证" :desc="idCardInfo(state.content?.idNo)" />
          <nut-cell title="车牌号" :desc="state.content?.carNo || '_'" />
          <nut-cell title="单位" :desc="state.content?.orgName || '_'" />
          <nut-cell title="头像照片">
            <template v-slot:link>
              <image
                v-if="state.content?.fileUrl"
                :src="getSysImgUrl(state.content?.fileUrl)"
                class="visitor-release-detail__image"
                mode="aspectFill"
              />
              <app-nut-icon-tips v-else />
            </template>
          </nut-cell>
        </nut-cell-group>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
